<template>
  <div class="order-info-container">
    <div class="order-info">
      <div class="order-info-line">
        <div class="order-info-line-item">
          <span>名称：</span>
          <span>{{ infoHandler(orderDetail?.project?.name) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>订单编号：</span>
          <span>{{ infoHandler(orderDetail?.project?.code) }}</span>
        </div>
        <!-- <div class="order-info-line-item">
          <span>客户类型：</span>
          <span>{{ getDictItem("industry", orderDetail?.customerType) }}</span>
        </div> -->
        <div class="order-info-line-item">
          <span>终端客户：</span>
          <span>{{ infoHandler(orderDetail?.companyFinalName) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>应用省份：</span>
          <span>{{ infoHandler(orderDetail?.project?.province) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>应用行业：</span>
          <span>{{ getDictItem("industry", orderDetail?.project?.industryId) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>发货方式：</span>
          <span>{{ getDictItem("shippingMethod", orderDetail?.deliveryTypeId) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>发货日期：</span>
          <span>{{ formatHandler(orderDetail?.deliveryTime) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>下单日期：</span>
          <span>{{ formatHandler(orderDetail?.orderTime) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>验收日期：</span>
          <span>{{ formatHandler(orderDetail?.planEndTime) }}</span>
        </div>
      </div>
      <div class="order-info-line">
        <div class="order-info-line-item">
          <span>订单类型：</span>
          <span>{{ getDictItem("orderType", orderDetail?.typeId) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>关联订单：</span>
          <span>{{ infoHandler(orderDetail?.linkOrderId) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>直接客户：</span>
          <span>{{ infoHandler(orderDetail?.companyName) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>应用国家：</span>
          <span>{{ infoHandler(orderDetail?.project?.countryName) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>应用城市：</span>
          <span>{{ infoHandler(orderDetail?.project?.city) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>应用场景：</span>
          <span>{{ getDictItem("scenario", orderDetail?.project?.sceneId) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>合同签订日期：</span>
          <span>{{ formatHandler(orderDetail?.contractSignTime) }}</span>
        </div>
        <div class="order-info-line-item">
          <span>交货地点：</span>
          <span>{{ infoHandler(orderDetail?.deliveryLocation) }}</span>
        </div>
      </div>
    </div>
    <div class="order-info-line">
      <div class="order-info-line-item">
        <span>订单备注：</span>
        <span style="word-break: break-all">{{ infoHandler(orderDetail?.remark) }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useDict } from "@/hooks/useDict";
import dayjs from "dayjs";
const { getDictItem } = useDict(["orderType", "scenario", "shippingMethod", "industry"]);
const { orderDetail } = defineProps({
  orderDetail: {
    type: Object,
    default: () => {}
  }
});

const infoHandler = (val: any) => {
  return val ? val : "--";
};
const formatHandler = (val: any) => {
  return val ? dayjs(val).format("YYYY年MM月DD日") : "--";
};
</script>
<style lang="scss" scoped>
.order-info-container {
  height: 100%;
  overflow: auto;
}
.order-info {
  display: flex;
  gap: 100px;
  &-line {
    &-item {
      display: flex;
      align-items: center;
      margin-bottom: 25px;
      span:first-child {
        min-width: 100px;
        margin-right: 20px;
        font-size: 14px;
        color: #666666;
        text-align: right;
      }
      span:last-child {
        font-size: 14px;
        color: #333333;
      }
    }
  }
}
</style>
